<template>
	<view class="content">
		<u-navbar :fixed="false" :title="basicInfo.APFunName" :autoBack="true" :safeAreaInsetTop="true"
			leftIconColor="#fff"></u-navbar>

		<view class="content_main" style="padding: 10px;">

			<view class="commonBox" style="background-color: rgba(142, 203, 94,0.6);">
				<view class="x-c" style="font-weight: 600;color: #fff;">
					<text>交货及时率</text>
				</view>

				<view class="x-bc" style="margin-top: 40rpx;color: #fff;">
					<view class="y-f" style="flex: 1;">
						<text>本月应到货数</text>
						<text>{{topInfo.shouldNum}}</text>
					</view>

					<view class="y-f" style="flex: 1;">
						<text>本月实际到货数</text>
						<text>{{topInfo.actualNum}}</text>
					</view>
				</view>
			</view>


			<view class="commonBox" style="background-color: rgba(81, 108, 252,0.6);">
				<view class="x-c" style="font-weight: 600;color: #fff;">
					<text>采购退货</text>
				</view>

				<view class="x-bc" style="margin-top: 40rpx;color: #fff;">
					<view class="y-f" style="flex: 1;">
						<text>退货数量</text>
						<text>{{topInfo.returnNum}}</text>
					</view>

					<view class="y-f" style="flex: 1;">
						<text>退货金额(万元)</text>
						<text>{{topInfo.returnAmount}}</text>
					</view>
				</view>
			</view>


			<!-- 卡片栏 -->
			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-left">
						<text></text>
					</view>
					<view class="commonBox-title-right">
						<u-tabs lineColor="#51d0d0" @change="changeTopTabs" lineWidth="30" :current="tabsCurrent"
							:activeStyle="{color:'#51d0d0',fontWeight:'500',transform:'scale(1.05)'}"
							:list="realCondition">
						</u-tabs>
					</view>
				</view>
				<view class="commonBox-content">
					<view class="scrollWrap">
						<view v-for="(item,index) in cardData" :index="index" :key="index" class="scrollWrap-item">
							<view class="y-f" style="">
								<text>{{item[realCondition[tabsCurrent]['tabValueKey']]}}</text>
								<text style="margin-top: 8px;font-size: 12px;">{{item.title}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>



			<!-- 图表 -->
			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-left" style="width: fit-content !important;">
						<text>物料到货率</text>
					</view>
				</view>
				<view class="commonBox-content">
					<m-uCharts chartType="line" :chartData="chartData1" :ChartsStyle="ChartsStyle"></m-uCharts>
				</view>
			</view>


			<!-- 图表 -->
			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-left" style="width: fit-content !important;">
						<text>采购产品量top6</text>
					</view>
				</view>
				<view class="commonBox-content">
					<m-uCharts chartType="pie" :chartData="chartData2" :ChartsStyle="ChartsStyle"></m-uCharts>
				</view>
			</view>



			<!-- 图表 -->
			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-left" style="width: fit-content !important;">
						<text>采购数量分析</text>
					</view>
				</view>
				<view class="commonBox-content">
					<m-uCharts chartType="column" :chartData="chartData3" :ChartsStyle="ChartsStyle"></m-uCharts>
				</view>
			</view>


			<!-- 图表 -->
			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-left" style="width: fit-content !important;">
						<text>供应商采购top6比例</text>
					</view>
				</view>
				<view class="commonBox-content">
					<m-uCharts chartType="column" :chartData="chartData4" :ChartsStyle="ChartsStyle"></m-uCharts>
				</view>
			</view>



			<!-- 图表 -->
			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-left" style="width: fit-content !important;">
						<text>采购数量分析</text>
					</view>
				</view>
				<view class="commonBox-content">
					<m-uCharts chartType="column" :chartData="chartData5" :ChartsStyle="ChartsStyle"></m-uCharts>
				</view>
			</view>



			<!-- 图表 -->
			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-left" style="width: fit-content !important;">
						<text>供应商来料分析top6</text>
					</view>
				</view>
				<view class="commonBox-content">
					<m-uCharts chartType="column" :chartData="chartData6" :ChartsStyle="ChartsStyle"></m-uCharts>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	import dataInitFun from '@/commonPage/kanban/BIKanban/js/dataInit.js';
	var dataInit = dataInitFun;
	export default {
		data() {
			return {
				basicInfo: {
					APFunName: " "
				},
				tabsCurrent: 1,
				realCondition: [{
					name: '本月',
					tabValueKey: 'oldValue',
				}, {
					name: '上月',
					tabValueKey: 'newValue',
				}],
				cardData: [],
				ChartsStyle: {
					width: '100%',
					height: '240px'
				},
				topInfo: {
					shouldNum: '', // 本月应到货数
					actualNum: '', // 本月实际到货数
					returnNum: '', // 退货数量
					returnAmount: '', // 退货金额(万元)
				},

				chartData1: {},
				chartData2: {},
				chartData3: {},
				chartData4: {},
				chartData5: {},
				chartData6: {},

			};
		},
		onLoad() {
			let basicInfo = this.$utils.deepClone(this.$store.state.Menu);

			this.basicInfo = this.$utils.deepClone(basicInfo) || {};

			this.getDataInfo();
		},
		methods: {
			getDataInfo() { // 获取数据
				let that = this;

				this.Request.request('plat_caigou', {}, function(ret) {
					if (ret.status == 200) {
						let cardData = dataInit.getInitByKanban('采购', ret.data);
						that.cardData = cardData;

						that.topInfo['shouldNum'] = ret.data.ds3[0]['Qty'];
						that.topInfo['actualNum'] = ret.data.ds3[0]['WCQty'];
						that.topInfo['returnNum'] = ret.data.ds4[0]['FQty'];
						that.topInfo['returnAmount'] = ret.data.ds4[0]['Money'];



						// 物料到货率-折现
						let chartData1 = ret.data.ds5.map(item => {
							return {
								seriesName: '',
								name: item.month,
								value: item.Rate,
								type: 'line',

							}
						})
						that.chartData1 = {
							ds5: chartData1
						}


						// 饼图
						let chartData2 = ret.data.ds6.map(item => {
							return {
								name: item.ProductCode,
								value: +item.Rate,
								type: 'pie',
							}
						})
						that.chartData2 = {
							ds6: chartData2
						}


						// 柱状图-采购数量分析
						let chartData3 = that.transformData(ret.data.ds7);
						that.chartData3 = {
							ds7: chartData3
						}


						// 饼图
						let chartData4 = ret.data.ds8.map(item => {
							return {
								name: item.SupplyName,
								value: +item.Rate,
								type: 'pie',
							}
						})
						that.chartData4 = {
							ds8: chartData4
						}


						// 柱状图-采购数量分析
						let chartData5 = that.transformData(ret.data.ds9, 'ProductCode', 'OldPrice', 'Price', {
							aText: '旧价格',
							bText: '新价格',
						});
						that.chartData5 = {
							ds9: chartData5
						}


						// 柱状图-供应商来料分析top6 
						let chartData6 = [];
						// 遍历原始数据  
						ret.data.ds10.forEach(item => {
							chartData6.push({
								seriesName: '物料数量',
								name: item.SupplyName,
								value: item.FQty,
								type: 'column'
							});
						});
						that.chartData6 = {
							ds10: chartData6
						}

					};

				})

			},
			transformData(data, dateKey = 'Month', ckQtyKey = 'OldQty', rkQtyKey = 'Qty', leng = {
				aText: '去年采购量',
				bText: '今年采购量',
			}) {
				const result = [];

				// 检查数据是否为数组  
				if (!Array.isArray(data)) {
					throw new Error('Input data must be an array');
				}

				// 遍历原始数据  
				data.forEach(item => {

					result.push({
						seriesName: leng.aText,
						name: item[dateKey],
						value: item[ckQtyKey],
						type: 'column'
					});

					result.push({
						seriesName: leng.bText,
						name: item[dateKey],
						value: item[rkQtyKey],
						type: 'column'
					});

				});

				return result;
			},
			changeTopTabs(data) { // 切换topCard 去年、今年
				this.tabsCurrent = data.index;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f2f2f2;
	}

	// 待办/实时数据横向滚动
	.scrollWrap {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		max-height: 180px;
		overflow-y: hidden;
		overflow-x: auto;
		row-gap: 3px;
		column-gap: 3px;

		&-item {
			min-width: 35vw;
			height: 80px;
			display: flex;
			flex-direction: column;
			background: linear-gradient(to bottom right, #F6F6F6, #FFFFFF);
			border-radius: 5px;
			padding: 5px 10px;
			justify-content: center;
			align-items: center;
		}
	}

	::v-deep.u-tabs__wrapper__nav__item {
		height: 30px !important;
	}

	.commonBox {
		display: flex;
		flex-direction: column;
		padding: 10px 5px;
		background-color: #ffffff;
		margin-bottom: 10px;
		border-radius: 16rpx;

		&-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 5px 10px 10px;

			&-left {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 150rpx;
				font-size: 16px;
				font-weight: 500;
			}

			&-right {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				width: 100rpx;
			}
		}

		&-content {
			display: flex;
			flex-direction: column;
		}
	}

	.charts-box {
		width: 100%;
		height: 240px;
	}
</style>